<template>
	<div class="container">
		<JxNavbar title='选择板块' />
		<div class="choose">
			<view class="item" v-for="item in menuList" :key="item['_id']" @click="chooseTopic(item)">
				<view class="item-left">
					<image :src="item['icon']" mode="heightFix" />
					<view class="item-more">
						<view>{{item['name']}}</view>
						<view>{{tools.formatNumber(item['count'])}}动态</view>
					</view>
				</view>
				<view class="item-right"></view>
			</view>
		</div>
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { useUserStore } from '@/store/user.js'
	import { useGeneralStore } from '@/store/general.js'
	import tools from '@/utils/tools/index.js'
	import JxNavbar from '@/components/navbar/index.vue'

	const userStore = useUserStore()
	const generalStore = useGeneralStore();

	const menuList = computed(() => generalStore.menuList);

	function chooseTopic(item) {
		userStore.chooseTopic = item;
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;
		padding-bottom: $side-width;

		.choose {
			padding: 0 $side-width;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 $side-width;
				height: 180rpx;
				border-radius: 5px;
				background: #fff;
				margin-top: $side-width;

				.item-left {
					flex: 1;
					display: flex;
					align-items: center;

					image {
						height: 120rpx;
						width: 120rpx;
					}

					.item-more {
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: $side-width;
						height: 120rpx;

						view:nth-child(1) {
							font-size: 34rpx;
							font-weight: 500;
						}

						view:nth-child(2) {
							color: $uv-tips-color;
							font-size: 28rpx;
							margin-top: 16rpx;
						}
					}
				}

				.item-right {
					border: 1px solid $uv-border-color;
					border-radius: 50%;
					display: flex;
					align-items: center;
					flex-direction: row;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
</style>